

<template>
  <div :class="{ 'app-container ':isPage }" class="flex flex-col">
    <div :class="{ 'app-container__section':hasBorder }" class="shrink-0" v-if="showSearch">
      <PlusSearch
          v-bind="getSearchBinds()"
          :columns="columns"
          v-model="searchForm"
      >
        <template #plus-field-createTime>
          <el-date-picker  start-placeholder="开始时间" end-placeholder="结束时间"  v-model="searchForm.timeRange" type="daterange"  />
        </template>

      </PlusSearch>
    </div>
    <div :class="{ 'app-container__section':hasBorder,'mt20':titleBar===false }"  class="flex-1 shrink-0">
      <PlusTable
          v-bind="getBinds({ isSelection:hasSelection})"
          :titleBar="false"
          :columns="columns"
      >
        <template #empty>
          <el-empty image-size="100" description="暂无数据"></el-empty>
        </template>
        <template #title>
          <table-title />
        </template>
        <template #plus-cell-state="{row}">
          <dict-tag :options="edu_student_state" :value="row.state"></dict-tag>
        </template>
        <template v-if="showToolbar" #toolbar>
          <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAdd"
              v-hasPermi="['edutation:student:add']"
          >新增</el-button>
          <el-button
              type="success"
              plain
              icon="Edit"
              :disabled="gSelection.length !== 1"
              @click="handleUpdate(gSelection[0])"
              v-hasPermi="['edutation:student:edit']"
          >修改</el-button>
          <el-button
              type="danger"
              plain
              icon="Delete"
              :disabled="gSelection.length === 0"
              @click="handleDelete"
              v-hasPermi="['edutation:student:remove']"
          >删除</el-button>
          <el-button
              type="warning"
              plain
              icon="Download"
              @click="handleExport"
              v-hasPermi="['edutation:student:export']"
          >导出</el-button>

          <ClockTimer :task="gGetList" />
          <SearchAreaControl v-model="gShowSearchForm" />
        </template>

        <template #plus-cell-action="scope">
          <el-button link type="success" icon="View" @click="handleSee(scope.row)" >查看</el-button>
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"  v-hasPermi="['edutation:student:edit']">修改</el-button>
          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['edutation:student:remove']">删除</el-button>
        </template>
      </PlusTable>
    </div>

    <add-form @update="gGetList" ref="addFormRef"  />

    <el-dialog title="学生信息" width="1000px" v-model="showDescriptions">
      <PlusDescriptions :column="4" :columns="columns" :data="descriptionsData" >
        <template #plus-desc-emergency="{ value }">
          <el-table border :data="jsonParse(value)">
            <el-table-column label="联系人姓名" prop="contactName">
            </el-table-column>
            <el-table-column label="关系">
              <template #default="{row}">
                <dict-tag :options="edu_emergency_relation" :value="row.contactRelation"></dict-tag>
              </template>
            </el-table-column>
            <el-table-column label="联系方式" prop="contactPhone">
            </el-table-column>
            <template #empty>
              <el-empty description="暂无紧急联系人信息" :image-size="60"></el-empty>
            </template>
          </el-table>
        </template>
      </PlusDescriptions>
    </el-dialog>

  </div>
</template>


<script setup name="Student">
import { listStudentApi, getStudentApi, delStudentApi, } from "@/api/edutation/student";
import { useTablePage } from '@/hooks/useTablePage.js'
import { useActions } from '@/hooks/useActions.js'
import { getCurrentInstance,ref } from "vue"
import AddForm from './addForm.vue'
import {useCommonData} from "@/hooks/useCommonData.js";
import {PlusDescriptions} from "plus-pro-components";
import {jsonParse} from "@/utils/index.js";
const { proxy } = getCurrentInstance();


const props = defineProps({
  isRadio:{
    type: Boolean,
    default: false,
  },
  titleBar:{
    type: [Boolean,Object],
    default: true,
  },
  // 搜索里面要隐藏的属性
  searchHideAttr: {
    type: Array,
    default: () => [],
  },
  // 表格里面要隐藏的列
  tableHideAttr: {
    type: Array,
    default: () => [],
  },
  // 给search表单的初始参数
  initSearchForm: {
    type: Object,
    default: () => ({}),
  },
  // 是否显示搜索框
  showSearch: {
    type: Boolean,
    default: true,
  },
  // 是否为页面
  isPage: {
    type: Boolean,
    default: true,
  },
  // 是否有容器边框
  hasBorder: {
    type: Boolean,
    default: true,
  },
  // 是否显示右侧插槽
  showToolbar: {
    type: Boolean,
    default: true,
  },
  // 是否有勾选
  hasSelection: {
    type: Boolean,
    default: true,
  },
});

const { sys_user_sex,edu_student_state,edu_emergency_relation } = proxy.useDict('edu_emergency_relation','sys_user_sex','edu_student_state');

const primaryKey = "studentId"  // 主键
const descriptionsData = ref({})
const showDescriptions = ref(false)
// =============================================
// 列表请求逻辑
const {
  schoolDataList,getSchoolDataList,
  professionalDataListBySchoolId,getProfessionalDataListBySchoolId,
  classDataList,getClassDataList,
  campusDataList,getCampusDataList
} = useCommonData();

getSchoolDataList();

const searchForm = ref({ ...(props.initSearchForm || {}) });

const columns = computed(()=>[
  {
    label: '学生姓名',
    prop: 'studentName',
    hideInSearch:false,
    valueType:'input',
    tableColumnProps: {
      align: 'center'
    },
    fieldProps:{
      maxlength: 200,
      modelModifiers: { trim: true },
    },
  },
  {
    label: '曾用名',
    prop: 'studentId',
    hideInSearch:true,
    hideInTable:true,
  },
  {
    label: '性别',
    prop: 'gender',
    hideInSearch:false,
    valueType:'select',
    width:'80px',
    options: sys_user_sex.value,
    tableColumnProps: {
      align: 'center'
    },
  },
  {
    label: '联系电话',
    prop: 'phone',
    hideInSearch:false,
    valueType:'input',
    tableColumnProps: {
      align: 'center'
    },
    fieldProps:{
      maxlength: 200,
      modelModifiers: { trim: true },
    },

  },
  {
    label: '归属学校',
    prop: 'schoolId',
    valueType:'select',
    options:schoolDataList.value,
    optionsMap:{
      label:'schoolName',
      value:'schoolId',
    },
    render: (_,{row})=>row.schoolName,
    fieldProps:{
      onChange(value){
        searchForm.value.proId = ''
        searchForm.value.classId = ''
        searchForm.value.campusId = ''
        professionalDataListBySchoolId.value = []
        classDataList.value = []
        campusDataList.value = []
        if(value){
          getProfessionalDataListBySchoolId(value);
          getClassDataList({ schoolId:value });
          getCampusDataList({ schoolId:value })
        }
      }
    },
  },
  {
    label: '归属校区',
    prop: 'campusId',
    valueType:'select',
    options:campusDataList.value,
    render: (_,{row})=>row.campusName,
    optionsMap:{
      label:'campusName',
      value:'campusId',
    },
    fieldProps:{
      maxlength: 200,
      modelModifiers: { trim: true },
    },
  },
  {
    label: '归属专业',
    prop: 'proId',
    valueType:'select',
    options:professionalDataListBySchoolId.value,
    render: (_,{row})=>row.proName,
    optionsMap:{
      label:'proName',
      value:'proId',
    },
    fieldProps:{
    },
  },
  {
    label: '归属班级',
    prop: 'classId',
    valueType:'select',
    options:classDataList.value,
    render: (_,{row})=>row.className,
    optionsMap:{
      label:'className',
      value:'classId',
    },
    fieldProps:{
    },
  },
  {
    label: '出生日期',
    prop: 'birthday',
    hideInSearch:true,
    hideInTable:true,
  },
  {
    label: '身份证号',
    prop: 'idCard',
    hideInSearch:false,
    valueType:'input',
    tableColumnProps: {
      align: 'center'
    },
    fieldProps:{
      maxlength: 200,
      modelModifiers: { trim: true },
    },

  },
  {
    label: '学号',
    prop: 'studentNumber',
    hideInSearch:false,
    valueType:'input',
    tableColumnProps: {
      align: 'center'
    },
    fieldProps:{
      maxlength: 200,
      modelModifiers: { trim: true },
    },
  },
  {
    label: '学生状态',
    prop: 'state',
    hideInSearch:false,
    valueType:'select',
    options:edu_student_state.value,
    tableColumnProps: {
      align: 'center'
    },
  },
  {
    label: '户籍地址',
    prop: 'cardAddress',
    hideInSearch:true,
    hideInTable: true,
    valueType:'input',
    tableColumnProps: {
      align: 'center'
    },
    descriptionsItemProps:{
      span: 6
    },
    fieldProps:{
      maxlength: 200,
      modelModifiers: { trim: true },
    },
  },
  {
    label: '现居地址',
    prop: 'houseAddress',
    hideInSearch:true,
    valueType:'input',
    hideInTable: props.tableHideAttr.includes("houseAddress"),
    tableColumnProps: {
      align: 'center'
    },
    descriptionsItemProps:{
      span: 6
    },
    fieldProps:{
      maxlength: 200,
      modelModifiers: { trim: true },
    },
  },
  {
    label: '备注',
    prop: 'remark',
    hideInSearch:true,
    hideInTable: true,
    descriptionsItemProps:{
      span: 6
    },
  },
  {
    label: '紧急联系人',
    prop: 'emergency',
    hideInSearch:true,
    hideInTable: true,
    descriptionsItemProps:{
      span: 6
    },
  },

  {
    label: '操作',
    prop: 'action',
    minWidth: '180px',
    hideInSearch: true,
    hideInDescriptions:true,
    hideInTable: props.tableHideAttr.includes("action"),
    tableColumnProps: {
      align: 'center',
      fixed: 'right'
    }
  }
])
const {
  gGetList,
  gSelection,
  gShowSearchForm,
  getBinds,
  getSearchBinds
} = useTablePage(listStudentApi, {
  searchForm,
  beforeRequest(query){
    const { timeRange, ...rest } = query;
    const params = proxy.formatRangeTime(timeRange, undefined,'YYYY-MM-DD');
    return { ...rest, params,...(props.initSearchForm || {}) }
  }
})

// 删除逻辑
const { deleteAction } = useActions();
function handleDelete(row) {
  deleteAction({
    api: delStudentApi,
    uniqueKey:primaryKey,
    selection:row[primaryKey] || gSelection.value
  }).then(() => {
    gGetList();
  });
}

const addFormRef = ref(null)
// 新增操作
const handleAdd = ()=>{
  addFormRef.value.openDialog();
}
// 修改操作
const handleUpdate = (val)=>{
  addFormRef.value.openDialog(val);
}
// 查看
const handleSee = (row)=>{
  showDescriptions.value = true;
  descriptionsData.value = row;
}

// 导出逻辑
const  handleExport = () =>{
  proxy.download(
      'edutation/student/export',
      {...searchForm.value},
      `student_${new Date().getTime()}.xlsx`
  )
}
defineExpose({
  gGetList,
  gSelection,
});
</script>


